<template>
    <el-drawer
        v-model="drawerVisible"
        title="字符选择器"
        direction="rtl"
        size="600px"
      >
      <CharacterSelector
          :key="`character-selector-drawer-${instanceId}`"
          ref="drawerCharSelectorRef"
          @character-selected="onCharacterSelected"
      />
      <template #footer>
          <span class="dialog-footer">
          <el-button @click="closeDrawer">关闭</el-button>
          </span>
      </template>
    </el-drawer>
</template>
<script setup>
import { ref } from 'vue'
import CharacterSelector from './characterSelector/character-selector.vue'
const instanceId = Math.random()
const emit = defineEmits(['character-selected'])

const drawerVisible = ref(false)
const drawerCharSelectorRef = ref()

const openDrawer = () => {
  drawerVisible.value = true
  if (drawerCharSelectorRef.value) {
    drawerCharSelectorRef.value.clearSelection()
  }
}
const closeDrawer = () => {
  drawerVisible.value = false
}
const onCharacterSelected = (char) => {
  emit('character-selected', char)
}
const getSelectedChars = () => {
  if (drawerCharSelectorRef.value) {
    return drawerCharSelectorRef.value.getSelectedChars()
  }
  return ''
}

defineExpose({
  openDrawer,
  closeDrawer,
  getSelectedChars
})
</script>